
<template>
    <div class="login">
        <vue-particles
                class="login-bg"
                color='#39AFFD'
                :particleOpacity="0.7"
                :particlesNumber="100"
                shapeType="circle"
                :particleSize="4"
                linesColor="#8DD1FE"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="3"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push"
        >
        </vue-particles>
        <div class="login-box">
            <div class="login-box-from">
                <el-form ref="loginForm" :model="user" status-icon label-width="80px">
                    <h3>注册</h3>
                    <hr>
                    <el-form-item prop="user_login" label="用户账号">
                        <el-input v-model="user.user_login" placeholder="请输入用户账号"></el-input>
                    </el-form-item>
                  <el-form-item prop="password" label="设置密码">
                    <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
                  </el-form-item>

                  <!--                    <el-form-item prop="email" label="邮箱">-->
<!--                        <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>-->
<!--                    </el-form-item>-->


<!--                  <el-form-item prop="phone" label="手机">-->
<!--                    <el-input v-model="user.phone" placeholder="请输入手机号"></el-input>-->
<!--                  </el-form-item>-->

<!--                  <el-row>-->
<!--                    <el-col :span="16">-->
<!--                      <el-form-item prop="phone" label="手机号码">-->
<!--                        <el-input v-model="user.phone" placeholder="请输入手机号码"></el-input>-->
<!--                      </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="8">-->
<!--                      <el-button type="primary" :disabled="buttonDisabled" @click="sendVerificationCode">发送验证码</el-button>-->
<!--                    </el-col>-->
<!--                  </el-row>-->

                    <el-form-item>
                        <el-button type="primary" icon @click="doRegister()">注册账号</el-button>
                    </el-form-item>
                    <router-link to="/Login">已有帐号？ 点此登录</router-link>


                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import {getSendVerificationCode, login} from "@/api/api.js";
import {setToken} from "@/utils/token";
    export default {
        name: "Register",
        data() {
            return {
                user: {
                  user_login: "",
                  // email: "",
                  phone:"",
                  password: ""
                },
              buttonDisabled:false
            };
        },
        created() {
            // console.log($);
            // console.log("1111");
        },
        methods: {
            // 以前的老代码
            // doRegister() {
            //     if (!this.user.user_login) {
            //         this.$message.error("请输入用户名！");
            //         return;
            //     } else if (!this.user.email) {
            //         this.$message.error("请输入邮箱！");
            //         return;
            //     } else if (this.user.email != null) {
            //         var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            //         if (!reg.test(this.user.email)) {
            //             this.$message.error("请输入有效的邮箱！");
            //         } else if (!this.user.password) {
            //             this.$message.error("请输入密码！");
            //             return;
            //         } else {
            //             // this.$router.push({ path: "/" }); //无需向后台提交数据，方便前台调试
            //             axios
            //                 .post("/register/", {
            //                     name: this.user.user_login,
            //                     email: this.user.email,
            //                     password: this.user.password
            //                 })
            //                 .then(res => {
            //                     // console.log("输出response.data", res.data);
            //                     // console.log("输出response.data.status", res.data.status);
            //                     if (res.data.status === 200) {
            //                         this.$router.push({ path: "/" });
            //                     } else {
            //                         alert("您输入的用户名已存在！");
            //                     }
            //                 });
            //         }
            //     }
            // }

        //  改成通过手机号验证的方式作为登录
          doRegister() {




          },
          sendVerificationCode() {
            // 获取用户输入的手机号码
            const phoneNumber = this.user.phone;

            // 将按钮设置为不可用状态
            this.$set(this, 'buttonDisabled', true);

            // 60秒后将按钮重新变为可用状态
            setTimeout(() => {
              this.$set(this, 'buttonDisabled', false);
            }, 6000);

            // 在这里编写发送请求验证码的逻辑
            getSendVerificationCode({"phone_number":phoneNumber}).then(res =>{

            }).catch(error =>{

            })

          }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    /*<!--  将下面 login-bg 这个给解除了，就会出现黑色的粒子特效  -->*/
    /*    .login-bg{*/
    /*        width: 100%;*/
    /*        height: 100%;*/
    /*        background: #3E3E3E;*/
    /*    }*/
    .login-box-from{
        width: 100%;
        height: 100%;
        padding: 30px;
        box-sizing: border-box;
    }
    .login-box{
        width: 400px;
        /*height: 287px;*/
        background: hsla(0,0%,100%,.3);
        border-radius: 5px;
        box-shadow: 0 0 2px #f7f7f7;
        border: 1px solid #f7f7f7;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -225px;
        margin-top: -150px;

    }
    .login {
        width: 100%;
        height: 100%;
        /*background: url("../assets/images/OIP-C.png") no-repeat;*/
        background-size: cover;
        overflow: hidden;
    }
    .login-wrap {
      /*background: url("../assets/images/OIP-C.png") no-repeat;*/
      background-size: cover;
      width: 80%;
      height: 80%;
      margin: 0px auto;
      overflow: hidden;
      padding-top: 10px;
      line-height: 40px;
    }
    h3 {
        color: #0babeab8;
        font-size: 24px;
    }
    hr {
        background-color: #444;
        margin: 20px auto;
    }
    a {
        text-decoration: none;
        color: #aaa;
        font-size: 15px;
    }
    a:hover {
        color: coral;
    }
    .el-button {
        width: 80%;
        margin-left: -50px;
    }
    .el-form-item {
        padding-right: 36px;
    }
</style>